<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>minAI工具箱</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-no5q7vA75rwu6X8ikdbLgG7/tMtadi1VhEaLKroTzO4vLQsURaM6Uom3wLkZbXsb1wCH4+YJ2kAAHqYh00/QJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f1f8e9;
}

header {
  text-align: center;
  padding: 20px 0;
  background-color: #81c784;
}

h1 {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}

main {
  margin: 40px auto;
  max-width: 1200px;
}

.category {
  margin-bottom: 40px;
  overflow-y: auto;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px -10px;
}

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  width: 200px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all .3s ease;
}

.tool:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.icon {
  font-size: 80px;
  margin-bottom: 10px;
}

span {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

footer {
  background-color: #81c784;
  color: #fff;
  text-align: center;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.link {
  color: #fff;
  text-decoration: underline;
}

.link:hover {
  color: #e0f7fa;
}

/* 自定义滚动条样式 */
.category::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #f1f8e9;
}

.category::-webkit-scrollbar-thumb {
  background-color: #a5d6a7;
  border-radius: 4px;
  box-shadow: inset 2px 2px 2px #81c784;
}

/* 底部栏样式 */
.bottom-bar {
  background-color: #81c784;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.bottom-bar .links {
  margin-bottom: 10px;
}

.bottom-bar .links a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}
</style>
<meta name="msvalidate.01" content="C826A0CE17D2237188495994898BD5E5" />
</head>
<body>
<!-- 工具箱主页 -->
<header>
<h1>minAI工具箱</h1>
<h2>一个免费、开源的工具箱</h2>
</header>
...
<div class="category">
<h2>工具</h2>
<div class="tool-row">
<a href="亲戚关系计算器.html" class="tool">
<i class="icon fas fa-users"></i>
<span>亲戚关系计算器</span>
</a>
<a href="体重BMI计算器.html" class="tool">
<i class="icon fas fa-weight"></i>
<span>体重BMI计算器</span>
</a>
<a href="倒计时.html" class="tool">
<i class="icon far fa-hourglass"></i>
<span>倒计时</span>
</a>
<a href="单位转换.html" class="tool">
<i class="icon fas fa-ruler-combined"></i>
<span>单位转换</span>
</a>
</div>
<div class="tool-row">
<a href="密码生成器.html" class="tool">
<i class="icon fas fa-key"></i>
<span>密码生成器</span>
</a>
<a href="摩斯电码.html" class="tool">
<i class="icon fas fa-broadcast-tower"></i>
<span>摩斯电码</span>
</a>
<a href="文字转语音.html" class="tool">
<i class="icon fas fa-volume-up"></i>
<span>文字转语音</span>
</a>
<a href="番茄时钟.html" class="tool">
<i class="icon fas fa-clock"></i>
<span>番茄时钟</span>
</a>
</div>
<div class="tool-row">
<a href="网络测速.html" class="tool">
<i class="icon fas fa-network-wired"></i>
<span>网络测速</span>
</a>
<a href="计算器.html" class="tool">
<i class="icon fas fa-calculator"></i>
<span>计算器</span>
</a>
<a href="银行卡类型查询.html" class="tool">
<i class="icon far fa-credit-card"></i>
<span>银行卡类型查询</span>
</a>
<a href="函数图像绘制工具.html" class="tool">
<i class="icon far fa-credit-card"></i>
<span>函数绘制</span>
</a>
<a href="成绩分析系统.html" class="tool">
<i class="icon far fa-credit-card"></i>
<span>成绩分析</span>
</a>
<a href="文件格式转换工具.html" class="tool">
<i class="icon fas fa-cat"></i>
<span>HTML转PDF</span>
</a>
<a href="屏幕测试.html" class="tool">
<i class="icon fas fa-cat"></i>
<span>屏幕测试</span>
</a>
<a href="二维码生成.html" class="tool">
<i class="icon fas fa-cat"></i>
<span>二维码生成</span>
</a>
<a href="分享框.html" class="tool">
<i class="icon fas fa-file-upload"></i>
<span>冷静草稿框</span>
</a>		
<a href="查快递.html" class="tool">
<i class="icon fas fa-file-upload"></i>
<span>查快递</span>
</a>		
</div>
</div>
<div class="category">
<h2>游戏</h2>
<div class="tool-row">
<a href="扫雷.html" class="tool">
<i class="icon fas fa-bomb"></i>
<span>扫雷</span>
</a>
<a href="猜拳游戏.html" class="tool">
<i class="icon far fa-hand-rock"></i>
<span>猜拳游戏</span>
</a>
<a href="数字华容道.html" class="tool">
<i class="icon fab fa-wolf-pack-battalion"></i>
<span>数字华容道</span>
</a>
<a href="点击方块.html" class="tool">
<i class="icon fas fa-cat"></i>
<span>点击方块</span>
</a>
<a href="山鸡跳跳乐.html" class="tool">
<i class="icon fas fa-fighter-jet"></i>
<span>山鸡跳跳乐</span>
</a>
<a href="打砖块.html" class="tool">
<i class="icon fas fa-cat"></i>
<span>打砖块</span>
</a>	
<a href="文字游戏.html" class="tool">
<i class="icon fas fa-cat"></i>
<span>文字游戏</span>
</a>
<a href="猜数字.html" class="tool">
<i class="icon fas fa-font"></i>
<span>猜数字</span>
</a>
</div>
</div>
</main>

<footer class="bottom-bar">
<div class="links">
<a href="https://minAI.gitee.io/" target="_blank" class="link">官网</a>
<a href="https://support.qq.com/products/502768" target="_blank" class="link">中梧教育</a>
<a href="mailto:minAI@qq.com" class="link">联系我邮箱</a>
<a href="https://gitee.com/minAI/minAI-toolbox" target="_blank" class="link">开源地址Gitee</a>
<a href="pc.html">新版</a>
</div>
<div class="contact">
</div>
</footer>
</body>
</html>